Modify the SP Print Preview with CSS Media Types
Posted by PANVEGA on March 30, 2009
When working with the MS Sample MasterPages for instance I could not print the whole page when using a browsers print preview. No more these tons of tables anymore Yessss! However the MasterPage classes are applied to the default Media Type in the core.css, which does not of course affect the standard SP MasterPages when printing.
Definitions:
- Media Types allow you to specify how documents will be presented in different media. The @media rule allows different style rules for different media in the same style sheet. The document can be displayed differently on the screen, on the paper, with an aural browser, etc.
- The master page almost always defaults to DEFAULT.MASTER . DEFAULT.MASTER refers to a file called CORE.CSS. Thus, any web pages that use this template will always use CORE.CSS when processing styles.
- Microsoft has made available four sample master page sets compatible with the Application Templates for Microsoft Windows SharePoint Services 3.0 to showcase some of the customization options master pages provide. The download includes four master page sets; each set has a distinctive look and feel and comes in five color variations: blue, orange, red, purple, and green.
The main content wasn´t visible in the print preview. After a little quick digging I quickly discovered this code in the core.ss. All the important classes are set to display:none.
@media print{
.ms-leftareacell,.ms-globallinks,.ms-siteaction,.ms-areaseparatorleft,.ms-rightareacell,.ms-areaseparatorright,
.ms-areaseparatorcorner,.ms-titlearealeft,.ms-titlearearight,.ms-searchform,.ms-banner,.ms-buttonheightwidth,.ms-buttonheightwidth2{
display:none;
}
}
In CSS 2 you can specify different stylesheets for the different output devices the document may be rendered to, see http://www.w3.org/TR/REC-CSS2/media.html for the full details.
You can either reference a separate css file like this
<LINK rel=”stylesheet” type=”text/css” href=”print.css” media=”print”>
or you can inline the style like this
@media print { .classname {display :none; visibility:hidden } }
Here i am going to show you different approaches:
There are a few similar approaches. The first one involves modifying the core.css style sheet that is incorporated into the OTB master pages. The other is to modify the master page and point to an alternate style sheet as the style sheet to use when printing. The second option is probably the one that Microsoft would prefer you to use, however it may require more effort to roll out. Taking this option one step further, you could create a feature and staple the feature to all the site templates (which would make it easier to deploy).
1. Modify the @media print from the core.css
First, the one Microsoft does not support: modifying the core.css file. The reason this is not officially supported is because a service pack or hot fix may overwrite the file. If there are issues with the changes you make, you will be charged for support calls… and so on.
Open up the core.css file (normally located in C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES) and search for @media – this will get you to an area within the style sheet that is set up to hide the listed classes within of the page. OTB the side menu and breadcrumbs are hidden, but the top logo and search boxes are visible.
You can modify this code. However the best thing is to create a custom CSS file in your Style library by using Office SP Designer. Make a reference in your masterpage. Copy the code from the core.css amd modify the code how you wish to show the preview content. Or just copy the code in your Master Page <Head> tag.
<style type=”text/css”>
@media print{
.ms-leftareacell,.ms-globallinks,.ms-siteaction,.ms-areaseparatorleft,.ms-rightareacell,.ms-areaseparatorright,
.ms-areaseparatorcorner,.ms-titlearealeft,.ms-titlearearight,.ms-searchform,.ms-banner,.ms-buttonheightwidth,.ms-buttonheightwidth2,.ms-main{
display:block;
visibility:visible;
}
}
</style>
2. Alternative Style Sheet
You may also want to reduce the padding or margin on the content tables, however you’d probably want to go towards a separate style sheet if you are looking at getting into this much detail, so check out the second option below!
The second alternative is to add a Style Sheet “Link” tag into the master page that points to an alternative style sheet. The format of the tag is:
<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/print.css” media=”print” />
You’ll notice the path in here is a bit odd – it points to the same virtual folder path that core.css resides in. That’s where I’ve put my revised Style Sheet to make sure it’s available in a common location across all MOSS / WSS sites.
Changes you make to the print.css file will only affect the printed page and not the live site.
3. Add some JS code to your masterpage
The other enhancement you can make to the master page (while you have it cracked open in SP Designer) is to add a “Print This Page” or “Printer-Friendly” link that people can click on (not everyone uses <CTRL> + P to print a web page). Add the following link to the top of the page (perhaps near the “My Links” or “My Site” links)
<a href=”#” onClick=”window.print();return false”>Print This Page</a>
This pops up the printer dialogue for the user, but it does not change the functionality in any other way (you get the same printed result by clicking the “Print” menu button or pressing <CTRL> + P).
4. Another approache is hidding parts in the print preview
So to alter how a SharePoint page looks when printed we can either alter the css files that SharePoint uses : ows.css and sps.css with SP Portal : or inline the stylesheet in the page. Approach 1.
<style type=”text/css”>
@media print
{
.ms-bannerframe {display :none; visibility:hidden }
.ms-nav {display :none; visibility:hidden }
}
</style>
Go to File-Print Preview and you should see that the top and left nav bars are now hidden.
On the Portal sites you probably need to add the ms-navframe style to the list above as that’s used in the left nav bar.
More Informations:
http://www.css-help.com/css-mediaprint.htm
PANVEGA's Blog 
Chris said
Hi,
Thanks for sharing information on print.
I manage to hide/unhide parts from the page but print preview only works for first few pages.
Meaning even if i have 5 pages / 10 pages of data, during print preview it only show me first 3 pages only.
Any idea on how to resolve it.
Thanks,
Chris
David Lozzi said
AWESOME STUFF. Thanks!